<template>
	<view class="body">
		<view class="titlebox">
			<view class="imgbox1">
				<view class="image1">
					<image class="img1" src="../../static/hlg.png"></image>
				</view>
			</view>
			<view class="titletext">欢迎登录火龙果</view>
		</view>

		<view class="shurubox">
			<view class="shurukuang">
				<view class="shurukuang1">
					<view class="imagebox2">
						<view class="image2">
							<image class="img2" src="../../static/yonghuming.png"></image>
						</view>
					</view>
					<input type="text" class="shuruyonghuming" placeholder="请输入手机号" v-model="username">
					<view class="imagebox3" @click="clearInput('username')" v-if="username">
						<view class="image3">
							<image class="img3" src="../../static/qingchu.png"></image>
						</view>
					</view>
				</view>
				<view class="shurukuang2">
					<view class="imagebox2">
						<view class="image2">
							<image class="img2" src="../../static/mima.png"></image>
						</view>
					</view>
					<input type="password" class="shurumima" placeholder="请输入密码" v-model="password">
					<view class="imagebox3" @click="clearInput('password')" v-if="password">
						<view class="image3">
							<image class="img3" src="../../static/qingchu.png"></image>
						</view>
					</view>
					<view class="imagebox4" @click="togglePasswordVisibility">
						<view class="image4">
							<image class="img4"
								:src="passwordVisibility ? '../../static/yincangmima.png' : '../../static/xianshimima.png'">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="error-message" v-if="errorMessage">{{ errorMessage }}</view>
		</view>

		<view class="jizhumimabox">
			<checkbox class="jizhumima" :checked="rememberMe" @change="rememberMe = $event.target.checked">记住密码
			</checkbox>
			<view class="tips" v-if="!rememberMe">请勾选【记住密码】，方便下次登录</view>
		</view>

		<button @click="login" :style="{background: isButtonActive ? '#e23234' : 'orange'}">立即登录</button>

		<view class="wangjimima">忘记密码</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				passwordVisibility: false,
				rememberMe: false,
				isButtonActive: false,
				errorMessage: ''
			}
		},
		methods: {
			checkInput() {
				this.isButtonActive = this.username && this.password;
				if (!this.username) {
					this.errorMessage = '请输入手机号';
				} else if (!this.password) {
					this.errorMessage = '请输入密码';
				} else if (this.password !== '123123') {
					this.errorMessage = '手机号或密码有误，请重新输入';
				} else {
					this.errorMessage = '';
				}
			},
			clearInput(type) {
				this[type] = '';
				this.checkInput();
			},
			togglePasswordVisibility() {
				this.passwordVisibility = !this.passwordVisibility;
			},
			login() {
				if (!this.username || !this.password) {
					this.checkInput();
				} else if (this.password === '123123') {
					// 模拟页面跳转
					uni.navigateTo({
						url: '/pages/index/index'
					});
				} else {
					this.errorMessage = '手机号或密码有误，请重新输入';
				}
			}
		},
		watch: {
			username(newVal, oldVal) {
				this.checkInput();
			},
			password(newVal, oldVal) {
				this.checkInput();
			}
		}
	}
</script>

<style>
	.error-message {
		color: red;
		text-align: center;
		margin-top: 10px;
	}

	.body {
		background: linear-gradient(180deg, #fff, #fff0f0);
		height: 100vh;
	}

	/* 登录页面样式 */
	.titlebox {
		width: 100%;
		height: 40vh;
	}

	.imgbox1 {
		width: 100%;
		padding-top: 20%;
		padding-bottom: 3%;
	}

	.image1 {
		width: 76px;
		margin: 0 auto;
	}

	.img1 {
		width: 100%;
		height: 76px;
	}

	.titletext {
		font-size: 22px;
		font-weight: 600;
		color: #111;
		text-align: center;
	}

	/* 输入账号密码样式 */
	.shurubox {
		width: 90%;
		margin: auto;
	}

	.shurukuang {
		width: 90%;
		margin: 0 auto;
	}

	.shurukuang1,
	.shurukuang2 {
		display: flex;
		background: white;
		width: 90%;
		padding: 5%;
		border-bottom: 1px solid #eee;
	}

	.imagebox2,
	.imagebox3,
	.imagebox4 {
		width: 10%;
		padding-right: 3%;
	}

	.image2,
	.image3,
	.image4 {
		width: 20px;
	}

	.img2,
	.img3,
	.img4 {
		width: 100%;
		height: 20px;
	}

	input {
		width: 70%;
	}

	/* 记住密码部分 */
	.jizhumimabox {
		width: 73%;
		padding: 5%;
		margin: 0 auto;
	}

	.tips {
		font-weight: 500;
		color: #2979ff;
		line-height: 18px;
	}

	button {
		width: 90%;
		background: #e23234;
		margin: 0 auto;
		color: white;
		transition: background-color 0.3s;
	}

	.wangjimima {
		width: 90%;
		margin: 0 auto;
		color: red;
		text-align: right;
	}
</style>
